

<template>
    <div>
                  <!--   部门员工统计      -->
      <div>
        <div class="header">
         部门员工统计

        </div>
        <div>
          <div id="back3" ></div>
        </div>

      </div>


    </div>

</template>

<script>

import axios from "axios";
import { mapState } from "vuex";

export default {
  data() {
    return {


    }

  },
  computed:{
   ...mapState(['SynthDataAll'])
  },
  mounted() {
    this.getSynthData()
    this.setSynthData()
  },


    methods: {
      //对接数据
       getSynthData(){


         axios({
           url: 'http://132.232.110.185/personnelManagement/dataStatistics/departmentEmployeeStatistics',
           method: 'get',

         }).then((response) => {

        this.$store.dispatch('setAycData',response.data.data)


         })
      },
      setSynthData(){
        const myChart = this.$echarts.init(document.getElementById("back3"))//引入到盒子
        const option = {
          title: {
            text: '部门员工',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '部门员工统计',
              type: 'pie',
              radius: '50%',
              data: this.SynthDataAll,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

      },

    }
}
</script>

<style lang="less" scoped>
.header{
  width: 100%;
  height: 74px;
  border-bottom: 1px solid rgba(0,0,0,0.3);
  padding-left:12px ;
  line-height: 74px;
  font-size: 18px;
}
#back3{
  width: 100%;
  text-align: center;
  height: 700px;
  line-height: 700px;
  margin:22px auto 0;

}
</style>

